<!DOCTYPE html>
<html>
<head>
	<title>todolist</title>
	<meta charset="utf-8">
	<script src="jquery.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;}
		li{list-style:none;}
		a{text-decoration:none;}
		body{background-color: #cdcdcd}
		i,em{
			font-style:normal;
		}
		.wrap{

		}
		.clear:after{
			display: block;
			content:"";
			clear:both;
		}
		.content{
			width: 600px;
			margin:0 auto;
		}
		.top{
			height: 50px;
			background-color: #000;
			line-height: 50px;
		}
		.top strong{
			font-size:22px;
			font-weight:normal;
			color:#e3e3e3;
		}
		.top input{
			width: 350px;
			height: 25px;
			border:none;
			border-radius:5px;
			box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
			text-indent:10px;
		}
		.top .left{
			height: 50px;
			float: left;
		}
		.top .right{
			float: right;
		}
		h2{
			padding:20px 0;
		}
		span{
			border-radius:10px;
			background-color: #e3e3e3; 
			float: right;
			font-size:14px;
			line-height: 20px;
			text-align: center;
			padding:2px 5px;
			margin-top:4px;
		}
		.tems{
			display: none;
		}
		.tem{
			margin:8px 0;
			background-color: #fff;
			height: 30px;
			border-left:5px solid #629A9C;
			border-radius:5px;
			padding-bottom:5px;
			box-sizing: border-box;
			line-height: 30px;
			position: relative;
			display: block;
		}
		.tem input{
			height: 20px;
			width: 20px;
			margin:5px;
			margin-bottom:0px;
		}
		.tem i{
			position: absolute;
			top:0px;
			left:35px;
		}
		.tem em{
			    position: absolute;
			    top: 2px;
			    right: 5px;
			    display: inline-block;
			    width: 14px;
			    height: 12px;
			    border-radius: 14px;
			    border: 6px double #FFF;
			    background: #CCC;
			    line-height: 14px;
			    text-align: center;
			    color: #FFF;
			    font-weight: bold;
			    font-size: 14px;
			    cursor: pointer;
		}
		.newtem{
			    border-left: 5px solid #999;
  				opacity: 0.5;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="top">
			<div class="content clear">
				<div class="left">
					<strong>ToDoList</strong>
				</div>
				<div class="right">
					<input type="text" placeholder="添加ToDo">
				</div>
			</div>
		</div>
		<div class="content now">
			<h2 class="clear">正在进行 <span>0</span></h2>
			<div class="tems">
				<input type="checkbox">
				<i></i>
				<em>-</em>
			</div>
		</div>
		<div class="content ok">
			<h2 class="clear">已经完成 <span>0</span></h2>
		</div>
	</div>
	<script>
		$(".tems input").click(function(){
			if($(this).prop("checked")){
				var o = $(this).closest(".tem").clone(true);
				o.addClass("newtem");
				o.appendTo(".ok").addClass("newtem").removeClass("oldtem");
				$(this).closest(".tem").remove();
			}
			if(!$(this).prop("checked")){
				var o = $(this).closest(".tem").clone(true);
				o.addClass("newtem").removeClass("newtem");
				o.appendTo(".now").addClass("oldtem").removeClass("newtem");
				$(this).closest(".tem").remove();
			}
			var arr = [];
			$(".now .tem").each(function(index,item){
				arr[index] = $(item).find("i").html();
			})
			localStorage.setItem("list",arr)
			var arr1 = [];
			$(".ok .tem").each(function(index,item){
				arr1[index] = $(item).find("i").html();
			})
			localStorage.setItem("list1",arr1)
			$(".now span").html($(".oldtem").length);
			$(".ok span").html($(".newtem").length);
			storage();
		})
		if(localStorage.getItem("list") === null || localStorage.getItem("list1") === null){
			$.ajax({
				url:`http://192.168.0.115:82/storage-list`,
				success(data){
					if(data !== "返回数据失败"){
						localStorage.setItem("list",JSON.parse(data)[0].list);
						localStorage.setItem("list1",JSON.parse(data)[0].list1);
					}
				}
			})
		}
		function storage(){
			$.ajax({
				url:`http://192.168.0.115:82/storage`,
				data:{
					list:localStorage.getItem("list"),
					list1:localStorage.getItem("list1"),
				},
			})
		}
		if(localStorage.getItem("list") !== "null" && localStorage.getItem("list") !== ""){
			var old = localStorage.getItem("list");
			if(indexOf(",") === -1){
				var old = old.split(",");
			}
			if(old[0] !== ""){
				old.forEach(function(item,index){
					var news = $(".tems").clone(true);
					news.appendTo(".now");
					news.removeClass("tems");
					news.addClass("tem").addClass("oldtem");
					news = news.find("i");
					news.html(item);
				})
			}
		}
		if(localStorage.getItem("list1") !== "null" && localStorage.getItem("list1") !== ""){
			var old1 = localStorage.getItem("list1");
			if(indexOf(",") === -1){
				var old1 = old1.split(",");
			}
			if(old1[0] !== ""){
				old1.forEach(function(item,index){
					var news = $(".tems").clone(true);
					news.appendTo(".ok");
					news.removeClass("tems");
					news.addClass("tem").addClass("newtem");
					news.find("input").prop("checked","checked");
					news = news.find("i");
					news.html(item);
				})
			}
		}
		$(".now span").html($(".oldtem").length);
		$(".ok span").html($(".newtem").length);
		window.onkeyup = function(e){
			if(e.keyCode == "13"){
				if($(".top input").val() !== ""){
					var arr = [];
					var news = $(".tems").clone(true);
					news.appendTo(".now");
					news.removeClass("tems");
					news.addClass("tem").addClass("oldtem");
					news = news.find("i");
					news.html($(".top input").val());
					$(".now span").html($(".oldtem").length);
					$(".top input").val("");
					$(".now .tem").each(function(index,item){
						arr[index] = $(item).find("i").html();
					})
					localStorage.setItem("list",arr)
					var arr1 = [];
					$(".ok .tem").each(function(index,item){
						arr1[index] = $(item).find("i").html();
					})
					localStorage.setItem("list1",arr1)
				}
				else{
					alert("不能为空！")
				}
				storage();
			}
		}
		$("em").click(function(){
			$(this).closest(".tem").remove();
			var arr = [];
			$(".now .tem").each(function(index,item){
				arr[index] = $(item).find("i").html();
			})
			localStorage.setItem("list",arr)
			var arr1 = [];
			$(".ok .tem").each(function(index,item){
				arr1[index] = $(item).find("i").html();
			})
			localStorage.setItem("list1",arr1)
			$(".now span").html($(".oldtem").length);
			$(".ok span").html($(".newtem").length);
			storage();
		})
	</script>
</body>
</html>